import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Button,
    TouchableOpacity,
    TextInput,
    TouchableNativeFeedback,
    Modal,
    NativeModules,

} from 'react-native';
import PropTypes from 'prop-types';
import ModalDialog from './ModalDialog';

export default class Login extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            isDialogVisible: false,
            img_uri: null,
            url:null
        };
    }

    callCamera() {
        NativeModules.IntentModule.callCamera(
            (msg) => {
                console.log("URI :" + msg);
                this.setState({
                    img_uri: msg
                })
            });
        this.hideDialog();
    }

    showDialog() {
        this.setState({isDialogVisible: true});
    }

    hideDialog() {
        this.setState({isDialogVisible: false});
    }

    uploadImg() {
        let formData = new FormData();
        let file = {uri: this.state.img_uri, type: 'multipart/form-data', name: 'head_image.png'};
        formData.append('img', file);
        fetch(this.state.url, {
            method: 'POST',
            headers: {
                'Content-Type': 'multipart/form-data',
            },
            body: formData,
        })
            .then((response) => response.text())
            .then((responseData) => {

                console.log('responseData', responseData);
            })
            .catch((error) => {
                console.error('error', error)
            });

    }


    render() {
        return (
            <View style={styles.container}>
                <Image source={{uri: this.state.img_uri}} style={styles._img}/>
                <TouchableNativeFeedback style={styles.head_img}
                                         onPress={() => this.showDialog()}>
                    <Text style={styles.head_img}>点我</Text>
                </TouchableNativeFeedback>
                <ModalDialog
                    _dialogVisible={this.state.isDialogVisible}
                    cansle={() => {
                        this.hideDialog()
                    }}
                    _dialogLeftBtnAction={() => {
                        this.callCamera()
                    }}
                    _dialogRightBtnAction={() => {
                        this.hideDialog()
                    }}
                />
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: '#fff',
    },
    _img: {
        height: 100,
        width: 100,
    },
    head_img: {
        height: 100,
        width: 100,
        backgroundColor: '#222'
    },
    upload_img: {
        height: 50,
        width: 100,
    },
    dialog: {
        height: 100,
        bottom: 10,
        alignItems: 'center',
        backgroundColor: '#222',
        padding: 20
    },
    dialog_bt: {
        height: 50,
    }

})